<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--axios用向前端发送请求-->
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>
		<title></title>
	</head>
	<body>
		<div id="box">
			<el-button type="success" size="mini" type="text" @click="openChild">添加菜单</el-button>
			<template>
			  <el-table
				size="mini"
			    :data="menuList"
			    border
			    style="width: 100%">
			    <el-table-column
			      prop="id"
			      label="id"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="label"
			      label="label"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="href"
			      label="href">
			    </el-table-column>
				<el-table-column
				  prop="parentid"
				  label="父级id"
				  width="60">
				</el-table-column>
				<el-table-column label="图标">
					<template slot-scope="scope" >
						<i :class="scope.row.imgicon"></i>
					</template>	
				</el-table-column>
				<el-table-column label="操作" >
					<template slot-scope="scope" >
						<el-button type="success" size="mini" type="text" @click="upd(scope.row)">编辑</el-button>
					</template>	
				</el-table-column>
			  </el-table>
			</template>
			
			<el-dialog title="增加菜单" :visible.sync="dialogFormVisible">
			  <el-form :model="formAdd">
			    <el-form-item label="菜单地址" label-width="80px">
			      <el-input v-model="formAdd.href" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="菜单名称" label-width="80px">
				  <el-input v-model="formAdd.label" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单图标" label-width="80px">
				  <!-- <el-input v-model="formAdd.imgicon" autocomplete="off"></el-input> -->
				  <i :class="formAdd.imgicon"></i>
				  <el-select placeholder="请选择图标" v-model="formAdd.imgicon">
					  <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
						  <i :class="item"></i>{{item}}
					  </option>
				  </select>
				</el-form-item>
				</el-form-item>
				<el-form-item label="父级" label-width="80px">
					<el-cascader
					:props="parentProps"
					v-model="formAdd.parentid"
					:options="parentOption"
					:show-all-levels="false"></el-cascader>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addSubmit">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			<el-dialog title="修改菜单" :visible.sync="dialogFormVisible2">
			  <el-form :model="formUpd">
			    <el-form-item label="菜单地址" label-width="80px">
			      <el-input v-model="formUpd.href" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="菜单名称" label-width="80px">
				  <el-input v-model="formUpd.label" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单图标" label-width="80px">
				  <!-- <el-input v-model="formAdd.imgicon" autocomplete="off"></el-input> -->
				  <i :class="formUpd.imgicon"></i>
				  <el-select placeholder="请选择图标" v-model="formUpd.imgicon">
					  <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
						  <i :class="item"></i>{{item}}
					  </option>
				  </select>
				</el-form-item>
				</el-form-item>
				<el-form-item label="父级" label-width="80px">
					<el-cascader
					v-model="formUpd.parentid"
					:props="parentProps"
					:options="parentOption"
					:show-all-levels="false"></el-cascader>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
			    <el-button type="primary" @click="updSubmit">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>

	</body>
	<script>
		new Vue({
			el:"#box",
			data:{
				imgiconoptions:[
					"el-icon-tableware",
					"el-icon-watermelon",
					"el-icon-cold-drink",
					"el-icon-knife-fork",
					"el-icon-apple"
				],
				formAdd:{
					href:"",
					label:"",
					imgicon:"",
					parentid:0
				},
				formUpd:{
					href:"",
					label:"",
					imgicon:"",
					parentid:0
				},
				parentOption:[],
				parentProps:{
					value:"id",
					emitPath:false,
					checkStrictly: true
				},
				dialogFormVisible:false,
				dialogFormVisible2:false,
				menuList:[]
			},
			methods:{
				initList() {
					axios.get(API+"allMenu2").then(res=> {
							console.log(res.data)
							this.menuList=res.data.data.list
							console.log(res.data.data.list)

						}).catch(err => {
						console.log(err)
					});
					axios.get(API+"allMenu2").then(res=> {
							let arr=arrayToTree(res.data.data.list)
							this.parentOption=arr
						}).catch(err => {
						console.log(err)
					});
				},
				openChild(id){
					//this.formAdd.parentid=id
					this.dialogFormVisible=true
					//console.log(id)
				},
				addSubmit(){
					console.log(this.formAdd)
					axios.post(API+"addMenu",this.formAdd).then(res=> {
							alert(res.data)
							this.dialogFormVisible=false
							this.formAdd={
								href:"",
								label:"",
								imgicon:"",
								parentid:0
							}
							this.initList()
						}).catch(err => {
						console.log(err)
					});
				},
				upd(row){
					this.dialogFormVisible2=true
					this.formUpd=row
					//console.log(this.formUpd)
				},
				updSubmit(){
					axios.post(API+"updMenu",this.formUpd).then(res=> {
							alert(res.data)
							console.log(this.formUpd)
							this.dialogFormVisible2=false
						}).catch(err => {
						console.log(err)
					});
				}
			},
			mounted() {
				this.initList()
			}
		})
	</script>
</html>